<template>
  <div class="goodsList">
    <!-- 顶部大图 -->
    <van-image
      v-for="item in bannerImg"
      :key="item.id"
      width="268px"
      height="100px"
      :src="item.picUrl"
    />
    <!-- 下方商品 -->
    <div class="bottom-goods" v-for="item in goodsTitle as any" :key="item.id">
      <p class="title">{{ item.name }}</p>
      <p class="line"></p>
      <van-grid :column-num="3" :border="false">
        <van-grid-item
          v-for="goodItem in item.categoryList as any"
          :key="goodItem.id"
          @click="toGoodsList(goodItem)"
        >
          <van-image :src="goodItem.wapBannerUrl" />
          <p>{{ goodItem.name }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import type { IResBannerList, IResCateGroupList } from '@/types/categoryList'

const router = useRouter()

defineProps<{
  goodsTitle: IResCateGroupList[]
  bannerImg: IResBannerList[]
}>()

const toGoodsList = async (goodItem: any) => {
  // 解构数据
  const { id, superCategoryId } = goodItem
  // console.log(id, superCategoryId)
  // 跳转到详情页
  router.push(`/goodsList?id=${id}&superCategoryId=${superCategoryId}`)
}
</script>

<script lang="ts">
export default {
  name: 'OtherView'
}
</script>

<style lang="less" scoped>
.goodsList {
  margin: 0;
}
.van-grid-item p {
  font-size: 12px;
}
.bottom-goods {
  margin: 0;
  .line {
    width: 270px;
    border-top: 1px solid #dbd9d9;
    margin: 0px;
  }
  .title {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 18px;
  }
}
.van-grid {
  margin-top: 5px;
}
</style>
